<template>
	<view class="imt-audio">
		<view class="audio-wrapper">
			<view class="audio-number">{{format(current)}}</view>
			<slider class="audio-slider" :activeColor="color" block-size="16" :value="current" :max="duration" @changing="sliderIsMove" @change="sliderIsClick"></slider>
			<view class="audio-number">{{format(duration)}}</view>
		</view>
		<view class="audio-control-wrapper" :style="{color}">
			<view class="">
				<i class="iconfont lcw">&#xe606;</i>
				<!-- <i class="iconfont lcw">&#xe60a;</i>
				<i class="iconfont lcw">&#xe6e2;</i> -->
			</view>
			<view class="audio-control audio-control-prev" v-if="control" :style="{borderColor:color}" @click="prev">&#xe601;</view>
			<view class="audio-control audio-control-switch" :style="{borderColor:color}" @click="audio.paused?play():audio.pause()">{{paused?'&#xe865;':'&#xe612;'}}</view>
			<view class="audio-control audio-control-next" v-if="control" :style="{borderColor:color}" @click="next">&#xe601;</view>
			<view class="list" @click="showMusicList">
				<image src="https://storage.ganorglobal.com/miniapp-service/static/musicStore/musiclist.png" mode=""></image>
			</view>
		</view>
		<view class="bottom">
			<view class="download">
				<image src="https://storage.ganorglobal.com/miniapp-service/static/musicStore/download.png" mode=""></image>
			</view>
			<view class="start">
				<i class="iconfont" :class="{'like':like}" @click="choiceLike">&#xe609;</i>
			</view>
			<view class="textImg" @click="showDetailPopup">
				<image src="https://storage.ganorglobal.com/miniapp-service/static/musicStore/text.png" mode=""></image>
			</view>
		</view>
		
		
		<!-- 点击歌曲列表出现的popup -->
		<uni-popup ref="musicList" type="bottom">
			<view class="musicListBox">
				<view class="musicList">
					<view class="musicList-item">
						111
					</view>
					<view class="musicList-item">
						222
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 点击文稿出现详情的popup -->
		<uni-popup ref="detail" type="bottom">
			<view class="detailBox">
				1111
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				audio: uni.createInnerAudioContext(),
				current: 0, //当前进度(s)
				duration: 0, //总时长(s)
				paused: true, //是否处于暂停状态
				loading: false, //是否处于读取状态
				seek: false ,//是否处于拖动状态
				like:false, //是否收藏
			}
		},
		props: {
			src: String, //音频链接
			autoplay: Boolean, //是否自动播放
			continue: Boolean, //播放完成后是否继续播放下一首，需定义@next事件
			control: {
				type: Boolean,
				default: true
			}, //是否需要上一曲/下一曲按钮
			color: {
				type: String,
				default: '#169af3'
			}, //主色调
			
			// 详情
			detail: {
				type: Object,
				
			},
			// 音乐列表
			musicList: {
				type: Array,
				defaut:[],
			}
		},
		methods: {
			// 进度条拖拽过程中时触发
			sliderIsMove(e){
				this.seek = true,
				this.current = e.detail.value;
			},
			//点击了进度条时触发 
			sliderIsClick(e){
				this.audio.seek(e.detail.value);
				this.current = e.detail.value;
			},
			//返回prev事件
			prev() {
				this.$emit('prev')
			},
			//返回next事件
			next() {
				this.$emit('next')
			},
			//格式化时长
			format(num) {
				return '0'.repeat(2 - String(Math.floor(num / 60)).length) + Math.floor(num / 60) + ':' + '0'.repeat(2 - String(Math.floor(num % 60)).length) + Math.floor(num % 60)
			},
			//点击播放按钮
			play() {
				this.audio.play();
				this.loading = true;
			},
			// 点击出现歌曲列表的popup
			showMusicList(){
				this.$refs.musicList.open();
			},
			// 点击出现详情的popup
			showDetailPopup(){
				this.$refs.detail.open();
			},
			
			// 点击收藏
			choiceLike(){
				this.like = !this.like;
			}
		},
		created() {
			if (this.src) {
				this.audio.src = this.src;
				if(this.autoplay){
					this.play();
				}
			}
			this.audio.obeyMuteSwitch = false
			//音频进度更新事件
			this.audio.onTimeUpdate(() => {
				if (!this.seek) {
					this.current = this.audio.currentTime
				}
				if (!this.duration) {
					this.duration = this.audio.duration
				}
			})
			this.audio.onCanplay(() =>{
				console.log("aaaaa",this.audio.duration)	
			})
			//音频播放事件
			this.audio.onPlay(() => {
				this.paused = false;
				this.loading = false;
			})
			//音频暂停事件
			this.audio.onPause(() => {
				this.paused = true
			})
			//音频结束事件
			this.audio.onEnded(() => {
				if (this.continue) {
					this.next()
				} else {
					this.paused = true
					this.current = 0
				}
			})
			//音频完成更改进度事件
			this.audio.onSeeked(() => {
				this.seek = false
			})
		},
		beforeDestroy(){
			this.audio.destroy()
		},
		watch: {
			src(src, old) {
				this.audio.src = src;
				this.current = 0
				this.duration = 0
				if (old || this.autoplay) {
					this.play();
				
				}
			}
		}
	}
</script>

<style scoped lang="less">
	@font-face {
		font-family: 'icon';
		src: url('//at.alicdn.com/t/font_1104838_fxzimc34xw.eot');
		src: url('//at.alicdn.com/t/font_1104838_fxzimc34xw.eot?#iefix') format('embedded-opentype'),
			url('//at.alicdn.com/t/font_1104838_fxzimc34xw.woff2') format('woff2'),
			url('//at.alicdn.com/t/font_1104838_fxzimc34xw.woff') format('woff'),
			url('//at.alicdn.com/t/font_1104838_fxzimc34xw.ttf') format('truetype'),
			url('//at.alicdn.com/t/font_1104838_fxzimc34xw.svg#iconfont') format('svg');
	}

	.imt-audio {
		padding: 30upx 0;
		background: #1D3666;
	}

	.audio-wrapper {
		display: flex;
		align-items: center;
	}

	.audio-number {
		width: 120upx;
		font-size: 24upx;
		line-height: 1;
		color: #fff;
		text-align: center;
	}

	.audio-slider {
		flex: 1;
		margin: 0;
	}

	.audio-control-wrapper {
		margin: 20upx auto 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-family: "icon" !important;
		width: 90%;
	}

	.audio-control {
		font-size: 32upx;
		line-height: 1;
		border: 4upx solid;
		border-radius: 50%;
		padding: 16upx;
	}

	.audio-control-next {
		transform: rotate(180deg);
	}

	.audio-control-switch {
		font-size: 40upx;
		margin: 0 50upx;
	}
	
	.list{
		margin-left: 20rpx;
		font-size: 0;
		image{
			width: 45rpx;
			height: 35rpx;
		}
	}
	.audioLoading {
		animation: loading 2s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
	}

	@keyframes loading {
		to {
			transform: rotate(360deg);
		}
	}
	.bottom{
		width: 90%;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 45rpx;
		view{
			font-size: 0;
			
			image{
				width: 40rpx;
				height: 40rpx;
			}
		}
		.start{
			view{
				color: #fff;
				font-size: 32rpx;
			}
			.like{
				color: red;
			}
		}
		.textImg{
			image{
				width: 55rpx;
				height: 35rpx;
			}
		}
	}
.musicListBox{
	width: 100%;
	padding: 20rpx 0;
	background-color: #fff;
	.musicList{
		width: 90%;
		margin: 20rpx auto;
		.musicList-item{
			padding: 20rpx 0;
			border-bottom: 1rpx solid #ccc;
		}
	}
}
.detailBox{
	width: 100%;
	height: 300rpx;
	background-color: #fff;
}
</style>
